import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import {
  createStyleImportPlugin,
  ElementPlusResolve
} from 'vite-plugin-style-import'
import { viteMockServe } from 'vite-plugin-mock'

const pathSrc = resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    // 自动导入vue3的hooks
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          '@/utils/index.ts': ['cache']
        }
      ],
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'icon',
          enabledCollections: ['ep']
        })
      ],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      dts: resolve(pathSrc, 'auto-imports.d.ts')
    }),
    // 自动导入组件
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          prefix: 'icon',
          enabledCollections: ['ep']
        }),
        // 自动导入 Element Plus 组件
        ElementPlusResolver()
      ],
      dts: resolve(pathSrc, 'components.d.ts')
    }),

    Icons({
      autoInstall: true,
      compiler: 'vue3'
    }),
    // 当你使用unplugin-vue-components来引入ui库的时候 message, notification 等引入样式不生效 安装vite-plugin-style-import即可
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()]
    }),
    viteMockServe({
      // default
      mockPath: './src/mock',
      localEnabled: true,
      //  这样可以控制关闭mock的时候不让mock打包到最终代码内
      injectCode: `
        import { setupProdMockServer } from './mock/mockProdServer';
        setupProdMockServer();
      `
    })
  ],
  server: {
    port: 8000,
    open: true,
    proxy: {
      '^/api': {
        target: 'http://152.136.185.210:5000',
        rewrite: (path) => path.replace(/^\/api/, ''),
        changeOrigin: true
      }
    }
  },
  resolve: {
    alias: {
      '@': pathSrc // src 目录别名
    },
    extensions: ['.js', '.ts', '.d.ts', '.vue', 'json'] // import 导入时哪些文件的后缀可以省略
  }
})
